<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
        }
        div{
            /* 没有设置box-sizing:border-box属性，宽高会加上padding和border的值，
            需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高 */
            box-sizing: border-box;
        }
        .calc{
            display: flex;
            /* 弹性项目,属性规定弹性项目是否应换行 */
            flex-wrap: wrap;
            width: 300px;
        }
        .item, .result{
            width: 75px;
            height: 75px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        .item1{
            width: 150px;
            height: 75px;
        }
        .return{
            width: 225px;
            height: 75px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        .result{
            width: 100%;
        }
        /* 点击效果 */
        .item:active{ 
            background-color: #ddd;
        }
        .return:active{ 
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="calc">
        <div class="result"></div>
        <div class="return">AC</div>
        <div class="item">/</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">*</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">-</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">+</div>
        <div class="item">0</div>
        <div class="item">.</div>
        <div class="item item1">=</div>
    </div>
    <script>
        document.querySelectorAll('.item').forEach(v => {
            v.addEventListener('click',e => {
                const clickContent = v.innerHTML;
                const resultEl = document.querySelector('.result');
                //const returnEl = document.querySelector('.return');

                if(clickContent === '='){
                    resultEl.innerHTML = eval(resultEl.innerHTML)
                }else{
                    resultEl.innerHTML += clickContent
                }
            })
        })
        document.querySelector('.return').addEventListener('click',e => {
                const resultEl = document.querySelector('.result');
                resultEl.innerHTML = '请输入数字';
            })
    </script>
</body>
</html>